Sass Essentials by 2015

Author:2015
Language: eng
Format: epub
Publisher: Packt Publishing

Tip

For a visual representation, browse the Internet—there is plenty of information available. You can go to http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm for a visual example of some of the palettes available.

Alright, let's get down and dirty with some code! We will build to create a full-sized theme for a mocked-up web page, but before doing so, let's start with something simple such as creating a palette swatch using Sass.

Creating palettes using functions

Colors, colors—where does one start with choosing the right color, I wonder?

Well, there are plenty of sources available; it's worth having a look online at sites such as COLOURlovers, at http://www.colourlovers.com. Another great resource is the extensive list of color values by Richard Bray, at http://richbray.me/cms/—it even comes with suitable Sass color names to boot!

Keeping this aside, let's assume that we've chosen a suitable base color—for our next example, we will be using a nice strong shade of red, or #c24. Let's get started:

We'll begin by extracting a copy of the HTML markup required for this demo, in the form of colorpalette.html; save a copy of this file to the project area.

Next, go ahead and add the following Sass styles to a new file, saving it as colorpalette.scss. We begin with some standard CSS styling to handle the fonts used in the demo:body { font-family: sans-serif, Times New Roman; font-size: 1.6rem; }

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.